<template>
  <div :class="getAppLogoClass" class="anticon">
    <img src="../../assets/images/logo.png" />
    <div :class="getTitleClass" class="ml-2 truncate md:opacity-100" v-show="showTitle">
      VManage
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import useAppStore from '@/store/modules/app';
  const appStore = useAppStore();
  const props = defineProps({
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
  });
  const { prefixCls } = useDesign('app-logo');

  const getAppLogoClass = computed(() => [
    prefixCls,
    { 'collapsed-show-title': !appStore.sidebar.opened },
  ]);

  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      'xs:opacity-0': !props.alwaysShowTitle,
    },
  ]);
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-app-logo';

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    transition: all 0.2s ease;
    cursor: pointer;

    &.light {
      border-bottom: 1px solid @border-color-base;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
      color: @primary-color;
    }

    &.dark &__title {
      color: @white;
    }

    &__title {
      font-size: 16px;
      transition: all 0.5s;
      font-weight: 700;
      line-height: normal;
    }
  }
</style>
